<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* align-items--居中对齐body */
			/* 1vh = 1% *视口高度 */
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				flex-direction: column;
				background: #040d15;
			}
			/* text-transform 控制文本的大小写 */
			/* letter-spacing 文本间距 */
			a{
				position: relative;
				display: inline-block;
				padding: 12px 36px;
				margin: 10px 0;
				color: #fff;
				text-decoration: none;
				text-transform: uppercase;
				font-size: 18px;
				letter-spacing: 2px;
				border-radius: 40px;
				overflow: hidden;
				background: linear-gradient(90deg,#0162c8,#55e7fc);
			}
			a:nth-child(2){
				background: linear-gradient(90deg,#755bea,#ff72c0);
			}
			/* transform:translate() 定义2D转换*/
			/* pointer-events:none 允许点击冒泡 */
			span{
				position: absolute;
				background-color: #fff;
				transform: translate(-50%,-50%);
				pointer-events: none;
				border-radius: 50%;
				animation: animate 1s linear infinite;
			}
			@keyframes animate{
				0%{width: 0px;height: 0px;opacity: 0.5;}
				100%{width: 500px;height: 500px;opacity: 0;}
			}
		</style>
	</head>
	<body>
		<a href="#">button</a>
		<a href="#">button2</a>
		<script type="text/javascript">
			const buttons = document.querySelectorAll("a");
			buttons.forEach(btn=>{
				btn.addEventListener('click',function(e){
					console.log(e);
					//点击的位置
					let x = e.clientX - e.target.offsetLeft;
					let y = e.clientY - e.target.offsetTop;
					
					//创建span元素
					let ripples = document.createElement('span');
					ripples.style.left = x +'px';
					ripples.style.top  = y +'px';
					this.appendChild(ripples);
					
					//延时1S后删除元素
					setTimeout(()=>{
						ripples.remove()
					},1000)
				})
			})
		</script>
	</body>

</html>
